<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
  <h3 class="modal-title">{{headerTitle | translate}}</h3>
  <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
  <div class="modal-body modal-body-height">
    <form [formGroup]="ruleForm" novalidate>
      <section class="form-block">
        <div class="form-group form-group-override">
          <label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
          <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
            <input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name"
              #ruleName (keyup)='checkRuleName()' autocomplete="off">
            <span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
          </label>
          <span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
        </div>
        <!--Description-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
          <textarea type="text" id="ruleDescription" class="inputWidth" row=3 formControlName="description"></textarea>
        </div>
        <!-- replication mode -->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.REPLI_MODE' | translate}}</label>
          <div class="radio-inline" [class.disabled]="policyId >= 0">
            <input type="radio" id="push_base" name="replicationMode" [value]=true  [disabled]="policyId >= 0" [(ngModel)]="isPushMode" (change)="modeChange()" [ngModelOptions]="{standalone: true}">
            <label for="push_base">Push-based</label>
            <clr-tooltip class="mode-tooltip">
              <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
              <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
                  <span>{{'TOOLTIP.PUSH_BASED' | translate}}</span>
              </clr-tooltip-content>
            </clr-tooltip>
          </div>
          <div class="radio-inline" [class.disabled]="policyId >= 0">          
            <input type="radio" id="pull_base" name="replicationMode" [value]=false [disabled]="policyId >= 0" [(ngModel)]="isPushMode" [ngModelOptions]="{standalone: true}">
            <label for="pull_base">Pull-based</label>
            <clr-tooltip class="mode-tooltip">
              <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
              <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
                  <span>{{'TOOLTIP.PULL_BASED' | translate}}</span>
              </clr-tooltip-content>
            </clr-tooltip>
          </div>
        </div>
        <!--source registry-->
        <div *ngIf="!isPushMode" class="form-group form-group-override">
          <label class="form-group-label-override  required">{{'REPLICATION.SOURCE_REGISTRY' | translate}}</label>
          <div class="form-select">
            <div class="select endpointSelect pull-left">
              <select id="src_registry_id" (change)="sourceChange($event)"  formControlName="src_registry" [compareWith]="equals">
                <option *ngFor="let source of sourceList" [ngValue]="source">{{source.name}}-{{source.url}}</option>
              </select>
            </div>
          </div>
          <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
          <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
        </div>
        <!--images/Filter-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.SOURCE_RESOURCE_FILTER' | translate}}</label>
          <div formArrayName="filters">
            <div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
              <div [formGroupName]="i">
                <div class="width-70">
                  <label>{{"REPLICATION." + supportedFilters[i]?.type.toUpperCase() | translate}}:</label>
                </div>
                <label *ngIf="supportedFilters[i]?.style==='input'" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left"
                  [class.invalid]='(filter.value.dirty || filter.value.touched) && filter.value.invalid'>
                  <input type="text" #filterValue required size="14" formControlName="value">
                  <span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
                </label>
                <div class="select inline-block" *ngIf="supportedFilters[i]?.style==='radio'">
                  <select  formControlName="value" #selectedValue id="{{i}}" name="{{supportedFilters[i]?.type}}">
                    <option value="">-- {{'REPLICATION.PLEASE_SELECT' | translate}} --</option>
                    <option *ngFor="let value of supportedFilters[i]?.values;" value="{{value}}">{{value}}</option>
                  </select>
                </div>
                <clr-tooltip>
                  <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                  <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
                    <span class="tooltip-content" *ngIf="supportedFilters[i]?.type==='name'">{{'TOOLTIP.NAME_FILTER' | translate}}</span>
                    <span class="tooltip-content" *ngIf="supportedFilters[i]?.type==='tag'">{{'TOOLTIP.TAG_FILTER' | translate}}</span>
                    <span class="tooltip-content" *ngIf="supportedFilters[i]?.type==='resource'">{{'TOOLTIP.RESOURCE_FILTER' | translate}}</span>                
                  </clr-tooltip-content>
                </clr-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!--destination registry-->
        <div *ngIf="isPushMode"  class="form-group form-group-override">
          <label class="form-group-label-override  required">{{'REPLICATION.DEST_REGISTRY' | translate}}</label>
          <div class="form-select">
            <div class="select endpointSelect pull-left">
                <select id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry"  [compareWith]="equals">
                    <option *ngFor="let target of targetList" [ngValue]="target">{{target.name}}-{{target.url}}</option>
                  </select>
            </div>
          </div>
          <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
          <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
        </div>
        <!--destination namespaces -->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.DEST_NAMESPACE' | translate}}</label>
          <div class="form-select">
            <div class="endpointSelect pull-left">
              <input formControlName="dest_namespace" type="text" id="dest_namespace" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth"
                maxlength="255">
            </div>
            <clr-tooltip>
              <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
              <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
                  <span>{{'TOOLTIP.DESTINATION_NAMESPACE' | translate}}</span>
              </clr-tooltip-content>
            </clr-tooltip>
          </div>
        </div>

        <!--Trigger-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override required">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
          <div formGroupName="trigger">
            <!--on trigger-->
            <div class="select width-115">
              <select id="ruleTrigger" formControlName="type">
                <option *ngFor="let trigger of supportedTriggers" [value]="trigger">{{'REPLICATION.' + trigger.toUpperCase() | translate }}</option>
              </select>
            </div>
            <!--on push-->
            <div formGroupName="trigger_settings">
              <div [hidden]="isNotSchedule()" class="form-group form-cron">
                <label class="required">Cron String</label>
                <label for="targetCron" aria-haspopup="true" role="tooltip"class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="!isNotSchedule() && cronTouched || !cronInputValid(ruleForm.value.trigger?.trigger_settings?.cron || '')" >
                  <input type="text" name=targetCron id="targetCron" required class="form-control cron-input" formControlName="cron">
                  <span class="tooltip-content">
                    {{'TOOLTIP.CRON_REQUIRED' | translate }}
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div [hidden]="isNotEventBased()" class="clr-form-control rule-width">
            <clr-checkbox-wrapper>
              <input type="checkbox" clrCheckbox [checked]="false" id="ruleDeletion" formControlName="deletion" class="clr-checkbox">
              <label for="ruleDeletion" class="clr-control-label">{{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}</label>
            </clr-checkbox-wrapper>
          </div>
          <div class="clr-form-control rule-width">
              <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox [checked]="true" id="enablePolicy" formControlName="enabled" class="clr-checkbox">
                <label for="enablePolicy" class="clr-control-label">{{'REPLICATION.ENABLED' | translate}}</label>
              </clr-checkbox-wrapper>
          </div>
          <div class="clr-form-control rule-width override-box">
              <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox [checked]="true" id="overridePolicy" formControlName="override" class="clr-checkbox">
                <label for="overridePolicy" class="clr-control-label">{{'REPLICATION.OVERRIDE' | translate}}</label>
              </clr-checkbox-wrapper>
              <clr-tooltip class="override-tooltip">
                <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                    <span>{{'TOOLTIP.OVERRIDE' | translate}}</span>
                </clr-tooltip-content>
              </clr-tooltip>
          </div>
        </div>
        <div class="loading-center">
          <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" id="ruleBtnCancel" class="btn btn-outline" [disabled]="this.inProgress" (click)="onCancel()">{{ 'BUTTON.CANCEL' | translate }}</button>
    <button type="submit" id="ruleBtnOk" class="btn btn-primary" (click)="onSubmit()" [disabled]="!isValid || !hasFormChange()">{{ 'BUTTON.SAVE' | translate }}</button>
  </div>
</clr-modal>